<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="/favicon.png"/>
    <link rel="bookmark" href="/favicon.png"/>
    <title th:text="${question.title}">问题</title>
    <link rel="stylesheet" href="/css/index.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link rel="stylesheet" href="/css/question.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js" type="text/javascript"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vditor@3.4.5/dist/index.css" />
    <script src="https://cdn.jsdelivr.net/npm/vditor@3.4.5/dist/index.min.js"></script>

    <style type="text/css">
        ul li {
            list-style: none;
        }

        .relevantQuestion {
            padding-left: 0px;
        }

        body {
        / / background-image: url("https://api.isoyu.com/bing_images.php");
            background-color: #efefef;
        }

        .issue-right {
            border-right-style: solid;
            border-right-width: 1px;
            border-right-color: #efefef;
        }

        .people-name {
            color: #007bff;
        }

        .people-name:hover {
            color: #007bff;
        }

        .edit-a {
            font-size: 90%;
            font-weight: 400;
            color: #999;
        }

        .edit-a:hover {
            text-decoration: none;
        }

        a:hover {
            text-decoration: none;
        }

        .question-comment {
            border-bottom: solid 1px rgba(0, 0, 0, .1);
        }
        .vditor-outline__item {
            border-left: 1px solid transparent;
        }

        .vditor-outline__item--current {
            border-left: 1px solid #4285f4;
            color: #4285f4;
            background-color: #f6f8fa;
        }

        .vditor-outline__item:hover {
            color: #4285f4;
            background-color: #f6f8fa;
        }

        @media (max-width: 768px) {
            #markdown-view-catalog {
                display: none !important;
            }

            .wrapper--preview {
                margin: 0;
            }
        }
    </style>
</head>
<body>
<a name="top"></a>
<!-- 标题栏 使用  fixed-top 将标题栏固定在顶部 -->
<div th:insert="~{navigation :: navbar}"></div>

<div class="container" style="height: 30px">
</div>

<!-- 问题页面 -->
<div class="container shadow-sm" style="background-color: white;">
    <div class="row">
        <div class="col-xl-9 mt-3 issue-right">
            <!-- 标题 -->
            <h3 th:text="${question.title}">

            </h3>
            <div class="container">
                <div class="row">
                    <div class="col-8">
                        <p class="mb-0 mt-2 small" style="color: #c6c5c1;">
                            <a class="issuse-question-class" href="#" th:text="${question.classification}">分类</a>
                            <span class="ml-3" style="color: #c6c5c1;">作者：</span><a class="people-name ml-0"
                                                                                    th:href="'/user/'+ ${question.user.getUserId()}"
                                                                                    >
                            <span th:text="${question.user.getUserName()}"></span>
                            <span class="badge badge-warning" th:if="${question.user.getPower() == 2}">VIP</span>
                        </a>&nbsp;|&nbsp;
                            发布于：<span th:text="${question.createTime}"></span>&nbsp;|&nbsp;
                            阅读数：<span th:text="${question.viewCount}"></span>
                        </p>
                    </div>
                    <div class="col text-right">
                        <button th:if="${isQuestionClickLike==false}" id="like-button" onclick="clickLikeQuestion(this)"
                                th:questionId-data="${question.questionId}"
                                th:receiver-data="${question.getUserId()}"
                                type="button" class="btn btn-outline-primary btn-sm mb-0" style="height: 30px;width: 100px">
                            <img src="/image/icon/clicklike.svg" width="auto" height="20">
                            <span class="badge badge-light" id="like-button-number" th:text="${question.likeCount}">4</span>
                        </button>
                        <button th:if="${isQuestionClickLike==true}" id="like-button" onclick="clickLikeQuestion(this)"
                                th:questionId-data="${question.questionId}"
                                th:receiver-data="${question.getUserId()}"
                                type="button" class="btn btn-primary btn-sm mb-0" style="height: 30px;width: 100px">

                            <img src="/image/icon/clicklike.svg" width="auto" height="20">
                            <span class="badge badge-light" id="like-button-number" th:text="${question.likeCount}">4</span>
                        </button>

                        <button onclick="followQuestion(this)" type="button" id="follow_question_button" th:questionId-data="${question.questionId}" th:class="${isFollowQuestion}?'btn btn-secondary btn-sm mb-0' : 'btn btn-outline-secondary btn-sm mb-0'" style="height: 30px;width: 100px">
                            <span th:if="${isFollowQuestion}" id="follow_question_text">取消关注</span>
                            <span th:if="${isFollowQuestion==false}" id="follow_question_text">关注</span>
                            <span id="follow_question_number" class="badge badge-light" th:text="${question.followCount}">4</span>
                        </button>
                    </div>
                </div>
            </div>
            <hr>
            <input type="hidden" id="questionId" th:value="${question.getQuestionId()}">
            <!-- 内容 -->
            <div class="container">
                <!-- Server-side output Markdown text -->
                <textarea id="question-markdown-text" class="vditor-reset" th:text="${question.description}" style="display:none"></textarea>
                <div id="question-markdown-view"></div>
            </div>


            <hr/>

            <!--标签-->
            <div class="container">
                <span th:each="tag:${question.getTag().split(',|，')}">
                    <a th:href="@{/(tag=${tag})}">
                    <span class="badge badge-primary mr-2">
                        <img src="/image/icon/tag.svg" height="15px">
                        <span class="ml-1" th:text="${tag}"></span>
                    </span>
                    </a>
                </span>
            </div>
            <!-- 编辑 -->
            <div class="container text-right"
                 th:if="${session.user != null && session.user.getId() == question.user.getId()}">
                <a class="edit-a" th:href="'/publish/' + ${question.getQuestionId()}"><img src="/image/icon/edit.svg"
                                                                                           width="18" height="18">&nbsp;编&nbsp;辑</a>
            </div>

            <!--回复导航-->
            <a name="commentTop"></a>
            <div class="container mt-4">
                <div class="row">
                    <div class="col">
                        <h4><span th:text="${question.commentCount}">16</span>个回复</h4>
                    </div>
                    <div class="col">
                        <ul class="nav justify-content-end">
                            <li class="nav-item">
                                <a class="nav-link active" th:href="'/question/' + ${question.getQuestionId()} + @{/(sort=0)} + '#commentTop'">发帖时间</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link active" th:href="'/question/' + ${question.getQuestionId()} + @{/(sort=1)} + '#commentTop'">倒序</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link active" th:href="'/question/' + ${question.getQuestionId()} + @{/(sort=2)} + '#commentTop'">最多点赞</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link active" th:href="'/question/' + ${question.getQuestionId()} + @{/(sort=3)} +'#commentTop'">最多评论</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <hr class="mt-2"/>
            <!-- 显示回复 -->
            <div class="container" th:if="${comments != null}">
                <div class="media mt-4 question-comment" th:each="comment : ${comments.data}">
                    <a th:href="${'/user/' + comment.user.getUserId()}">
                    <img class="rounded-circle align-self-start mr-3" th:src="${comment.user.getHeadUrl()}" width="40"
                         height="40">
                    </a>
                    <div class="media-body">
                        <a class="mt-0 ml-0 issuse-question-people"
                           th:href="${'/user/' + comment.user.getUserId()}"><span
                                th:text="${comment.user.getUserName()}">顶部对齐</span>
                            <span class="badge badge-primary" th:if="${comment.user.getUserId() == question.user.getUserId()}">楼主</span>
                            <span class="badge badge-warning" th:if="${comment.user.getPower() == 2}">VIP</span>
                        </a>
                        <div th:id="${'comment-show-' + comment.getCommentId()}" class="comment-show-md mt-2" style="padding-top: 20px; padding-bottom: 20px">
                            <textarea class="comment-show-text vditor-reset" style="display: none" th:text="${comment.getContent()}"></textarea>
                            <div class="comment-show-view"></div>
                        </div>

                        <div class="row mt-2 mb-2">
                            <div class="col">
                                <button type="button" class="btn btn-outline-primary btn-sm" onclick="clickLikeComment(this, 1)"
                                        th:data-id="${comment.getCommentId()}">
                                    <img src="/image/icon/clicklike.svg" width="auto" height="20">
                                    <span th:id="${'comment-likeCount-' + comment.getCommentId()}" class="badge badge-light" th:text="${comment.getLikeCount()}">0</span>
                                </button>
                                <button type="button" class="btn btn-outline-dark btn-sm ml-2"
                                        th:data-id="${comment.getCommentId()}"
                                        onclick="showSecondComment(this)">
                                    <img src="/image/icon/comment.svg" width="auto" height="20">
                                    <span class="badge badge-light" th:text="${comment.getCommentCount()}">0</span>
                                </button>
                            </div>
                            <div class="col text-right">
                                <p th:text="${comment.getModifiedTime()}"></p>
                            </div>
                        </div>

                        <!-- 回复评论的评论  二级评论 -->
                        <div class="collapse mt-2  shadow-sm second-comment ml-2 mr-3 border"
                             th:id="${'comment-' + comment.getCommentId()}">

                            <div class="container" style="padding: 0px;"
                                 th:id="${'commentBody-' + comment.getCommentId()}">
                                <div class="container second-comment-text ml-0 mr-0">
                                    <div class="row">
                                        <div class="col mt-4 ml-2 mr-2">
                                            <div class="form-group">
                                                <!-- 评论内容 -->
                                                <textarea autocomplete="off" class="form-control"
                                                          th:id="${'second-content-' + comment.getCommentId()}"
                                                          rows="1" placeholder="请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col text-right">
                                            <a href="javascript:void(0);">
                                                <img src="/captche/images" title="点击刷新"
                                                     onclick="this.src='/captche/images?'+Math.random()"
                                                     height="40dp"/>
                                            </a>
                                        </div>
                                        <div class="col mb-2">
                                            <input type="text" height="40dp" class="form-control mt-1"
                                                   th:id="${'second-captcha-' + comment.getCommentId()}"
                                                   autocomplete="off" placeholder="验证码">
                                        </div>
                                        <div class="col text-right">
                                            <button type="button" th:data-id="${comment.getCommentId()}"
                                                    class="btn btn-success btn-sm mr-2 mt-2"
                                                    onclick="twoLevelComment(this)">提交
                                            </button>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div th:if="${comments == null}" class="content mt-5 mb-5">
                <h5>还没有人回复这个问题，快来抢沙发把！</h5>
            </div>

            <!--页码-->
            <div class="container mt-4 mb-2" th:if="${comments != null}">
                <nav aria-label="Page navigation example" th:if="${comments.totalPage} != 0">
                    <ul class="pagination justify-content-end">
                        <!-- 返回首页 -->
                        <li class="page-item" th:if="${comments.showFirstPage}">
                            <a class="page-link" id="first-page-a" th:href="'/question/' + ${question.getQuestionId()} + @{/(sort=${sort})}"
                               aria-label="Previous" onclick="addLocaleUrlForPage('first-page-a')">
                                <span aria-hidden="true">&laquo;&laquo;</span>
                                <span class="sr-only">Previous</span>
                            </a>
                        </li>
                        <!-- 上一页 -->
                        <li class="page-item" th:if="${comments.showPrevious}">
                            <a class="page-link" id="link-to-last-a"
                               th:href="'/question/'+ ${question.getQuestionId()} + @{/(page=${comments.nowPage-1},sort=${sort})}+ '#commentTop'"
                               aria-label="Previous"
                               onclick="addLocaleUrlForPage('link-to-last-a')">
                                <span aria-hidden="true">&laquo;</span>
                                <span class="sr-only">Previous</span>
                            </a>
                        </li>


                        <li class="page-item" th:each="page : ${comments.pages}"
                            th:class="${comments.nowPage == page}? 'page-item active' : 'page-item'">
                            <a class="page-link" th:href="${'/question/'+question.getQuestionId()} + @{/(page=${page},sort=${sort})}+ '#commentTop'"
                               th:text="${page}" th:id="${page}"
                               th:onclick="'javascript:addLocaleUrlForPage(\''+${page}+'\')'">
                                1
                            </a>
                        </li>


                        <!-- 下一页 -->
                        <li class="page-item" th:if="${comments.showNext}">
                            <a class="page-link" id="lind-to-next-a"
                               th:href="'/question/'+${question.getQuestionId()} + @{/(page=${comments.nowPage+1},sort=${sort})}+ '#commentTop'"
                               aria-label="Next"
                               onclick="addLocaleUrlForPage('lind-to-next-a')">
                                <span aria-hidden="true">&raquo;</span>
                                <span class="sr-only">Next</span>
                            </a>
                        </li>
                        <!-- 最后一页 -->
                        <li class="page-item" th:if="${comments.showEndPage}">
                            <a class="page-link" id="link-to-end-a"
                               th:href="'/question/'+${question.getQuestionId()} + @{/(page=${comments.totalPage},sort=${sort})}+ '#commentTop'"
                               th:if="${comments.showEndPage}"
                               aria-label="Next" onclick="addLocaleUrlForPage('link-to-end-a')">
                                <span aria-hidden="true">&raquo;&raquo;</span>
                                <span class="sr-only">Next</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>

            <hr/>
            <!-- 评论区 -->
            <div class="container">
                <div class="form-group">
                    <!-- 评论区上用户头像 -->
                    <div class="media mb-2" th:if="${session.user != null}">
                        <input type="hidden" id="now-online-user-id"  th:value="${session.user.getId()}">
                        <input type="hidden" id="now-online-user-userId"  th:value="${session.user.getUserId()}">
                        <input type="hidden" id="now-online-user-name"  th:value="${session.user.getUserName()}">
                        <img class="align-self-center mr-3 img-fluid rounded-circle"
                             id="get_now_online_user_src"
                             th:src="${session.user.getHeadUrl()}" width="40" height="40">
                        <p class="mt-2"><a th:href="${'/user/' + session.user.getUserId()}">
                            <span th:text="${session.user.getUserName()}">

                        </span>
                            <span class="badge badge-warning" th:if="${session.user.getPower() == 2}">VIP</span>
                        </a></p>
                        <input type="hidden" id="userId" th:value="${session.user.getId()}">
                    </div>
                    <div class="mt-2 mb-2" th:if="${session.user == null}">评论</div>
                    <!-- 评论内容 -->
                    <div id="comment-text">

                    </div>
                    <script src="/js/vditor/emoji_map.js" type="text/javascript"></script>
                    <script type="text/javascript">
                        const vditor = new Vditor('comment-text', {
                            //toolbar: ['emoji', 'headings', 'bold', 'italic', 'strike', '|', 'line', 'quote', 'list', 'ordered-list', 'check', 'code', 'inline-code', 'undo', 'redo', 'upload', 'link', 'table', 'record', 'both', 'preview', 'fullscreen'],
                            //typewriterMode: true,
                            placeholder: "请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。",
                            counter: 100000,
                            height: 400,
                            hint: {
                                emojiPath: '/js/vditor/dist/images/emoji',
                                emoji: emojis
                            },
                            tab: '\t',
                            upload: {
                                accept: 'image/*, .wav, .mp4, .zip, .rar, .7z, .docx, .dox, .ppt, .pptx, .xls, .xlsx, .pdf, .apk, .mp3, .txt',
                                url: '/api/file/upload',
                                // linkToImgUrl: '/api/file/upload',
                                filename (name) {
                                    return name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, '')
                                        .replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, '')
                                        .replace('/\\s/g', '');
                                },
                            }
                        });
                    </script>
                </div>
                <div class="row mt-2">
                    <div class="col text-right">
                        <a href="javascript:void(0);">
                            <img title="点击刷新" src="/captche/images" onclick="this.src='/captche/images?'+Math.random()"/>
                        </a>
                    </div>
                    <div class="col">
                        <div class="form-group">
                            <input type="text" autocomplete="off" class="form-control mt-2" id="captcha"
                                   placeholder="验证码">
                        </div>
                    </div>
                    <div class="col text-right">
                        <button type="button" class="btn btn-success mt-2" onclick="comment()">提交</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 右边 -->
        <div class="col">
            <br/>
            <br/>
            <h5>发起人</h5>
            <br/>
            <div class="container text-center">
                <img class="rounded-circle" th:src="${question.user.getHeadUrl()}" alt="用户头像" width="60"
                     height="60"/>
                <a th:href="'/user/'+ ${question.user.getUserId()}">
                    <p>
                        <span  th:text="${question.user.getUserName()}"></span>
                        <span class="badge badge-warning" th:if="${question.user.getPower() == 2}">VIP</span>
                    </p>

                </a>
            </div>
            <hr/>
            <h5>目录</h5>
            <br>
            <div id="catalogView"></div>
            <script type="text/javascript">
                const text = document.querySelector("#question-markdown-text").value
                const questionView = document.querySelector("#question-markdown-view")
                const catalogView = document.querySelector("#catalogView")
                Vditor.preview(questionView, text, {
                    anchor: 1,
                    emojiPath: '/js/vditor/dist/images/emoji',
                    after() {
                        Vditor.outlineRender(questionView, catalogView)
                         if (catalogView.innerText.trim() !== '') {
                             catalogView.style.display = 'block'
                            initOutline()
                        }
                    }
                });

                function initOutline() {
                    const headingElements = []
                    Array.from(document.querySelector("#question-markdown-view").children).forEach((item) => {
                        if (item.tagName.length === 2 && item.tagName !== 'HR' && item.tagName.indexOf('H') === 0) {
                            headingElements.push(item)
                        }
                    })

                    let toc = []
                    window.addEventListener('scroll', () => {
                        const scrollTop = window.scrollY
                        toc = []
                        headingElements.forEach((item) => {
                            toc.push({
                                id: item.id,
                                offsetTop: item.offsetTop
                            })
                        })

                        const currentElement = document.querySelector('.vditor-outline__item--current')
                        for (let i = 0, iMax = toc.length; i < iMax; i++) {
                            if (scrollTop < toc[i].offsetTop - 30) {
                                if (currentElement) {
                                    currentElement.classList.remove('vditor-outline__item--current')
                                }
                                const index = i > 0 ? i - 1 : 0
                                document.querySelector('div[data-id="' + toc[index].id + '"]').classList.add('vditor-outline__item--current')
                                break
                            }
                        }
                    })
                }
            </script>
            <br/>
            <hr/>
            <br/>
            <h5>站长微信</h5>
            <div class="container text-center mt-2">
                <img src="/image/icon/weixin.jpg" width="70%">
            </div>
            <hr/>
            <h5 class="mb-4">相关问题</h5>
            <div class="container-fluid relevantQuestion">
                <div th:each="relevant : ${relevantQuestion}">
                    <ul class="mt-2 relevantQuestion">
                        <li>
                            <a th:href="${'/question/' + relevant.getQuestionId()}">
                                <span th:text="${relevant.getTitle()}"></span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <br/>
            <hr/>
            <br/>
            <div class="container" style="">
                广告位招租
            </div>
            <br/>
            <!-- 图片轮播 -->
            <div id="Advertisement" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators" >
                    <li th:each="ad : ${advertisements}" th:class="${adStat.index == 0} ? 'active' : ''" data-target="#Advertisement"  th:data-slide-to="${adStat.index}"></li>
                </ol>
                <div class="carousel-inner">
                    <div th:each="ad : ${advertisements}" th:class="${adStat.index == 0} ? 'carousel-item active' : 'carousel-item'">
                        <a th:href="'/adUrl' + @{/(url=${ad.url},id=${ad.id})}" target="_blank">
                            <img class="d-block w-100" th:src="${ad.image}" th:alt="${ad.title}" th:title="${ad.title}">
                            <div class="carousel-caption d-none d-md-block mb-0" style="border-bottom: 0px">
                                <p class="mb-0" th:text="${ad.title}"></p>
                            </div>
                        </a>
                    </div>
                </div>
                <a class="carousel-control-prev" href="#Advertisement" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#Advertisement" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
    </div>
</div>

<div id="backTop" class="text-right mr-5 mb-5" style="position:fixed; right: 20px; bottom: 10px;">
    <a href="#top"><img src="/image/icon/top.svg" width="60px" alt="回到顶部" title="回到顶部"></a>
</div>

<div class="container" style="height: 30px">
</div>

<!-- 页脚 -->
<div th:insert="~{footer :: footer}"></div>

<script type="text/javascript">
    const list = document.getElementsByClassName("comment-show-text");
    const views = document.getElementsByClassName("comment-show-view");
    var length = list.length;
    for (var i = 0; i < length; i++) {
        Vditor.preview(views[i], list[i].value, {
            anchor: 0,
            emojiPath: "/js/vditor/dist/images/emoji"
        })
    }
</script>
<script src="/js/follow.js" type="text/javascript"></script>
<script src="/js/url.js" type="text/javascript"></script>
<script src="/js/comment.js" type="text/javascript"></script>
</body>
</html>
